<template>
  <div id="app" class="relative bg-white">
    <app-header v-if="header_show"></app-header>
    <app-headerhover v-if="headerhover_show"></app-headerhover>
    <router-view v-on:public_header="public_header" v-on:public_headerhover="public_headerhover" v-on:public_footer="public_footer" v-if="isRouterAlive"></router-view>
    <app-footer v-if="footer_show"></app-footer>
  </div>
</template>

<script>
// 公用头部和底部
import Headnav from './components/public/Headnav'
import Headerhover from './components/public/Header_hover'
import Footer from './components/public/Footer'
export default {
  name: 'App',
  provide(){
      return{
        reload:this.reload
      }
    },
  data(){
      return {
          header_show:false,
          footer_show:true,
          headerhover_show:true,
          isRouterAlive:true
      }
  },
  components: {
        'app-header':Headnav,
        'app-headerhover':Headerhover,
        'app-footer':Footer
  },
  methods:{
      //是否显示头部
      public_header:function (bool) {
        this.header_show = bool;
      },
      //是否显示带下拉头部
      public_headerhover:function (bool) {
        this.headerhover_show = bool;
      },
      //是否显示底部
      public_footer:function (bool) {
          this.footer_show = bool;
      },
      reload(){
        this.isRouterAlive = false;
        this.$nextTick(function () {
          this.isRouterAlive = true
        });
      }
  }
}
</script>

<style>
</style>
